<template>
	<view class="collect-main">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#66596b"></uni-segmented-control>
		<view class="content">
			<view class="notes-content" v-show="current === 0">
				<view class="note-item" v-for="item in noteData" :key="item.noteAid" @click="clickNoteItem(item)">
					<view class="note-image">
						<image :src="item.url" mode="aspectFill" v-if="!item.isVedio"></image>
						<!-- <video :src="item.url" controls preload="metadata" crossorigin="anonymous"
							:poster="item.videoCover ? item.videoCover : ''" v-else></video> -->

						<!-- 由于uniapp组件video层级太高，所以用自定义的视频组件 -->
						<DomVideoPlayer class="DomVideoPlayer" :src="item.url" :autoplay="false" controls muted :isLoading="true" v-else>
						</DomVideoPlayer>
					</view>
					<view class="note-title">
						{{item.title}}
					</view>
					<view class="note-author-info">
						<view class="note-author-avatar-name">
							<view class="note-author-avatar">
								<image :src="item.authorAvatar" mode="aspectFit"></image>
							</view>
							<view class="note-author-name">
								{{item.authorUserName}}
							</view>
						</view>
						<view class="like-num-view">
							<view class="note-like-view">
								<uni-icons type="heart" v-if="!item.isLike" color="#7f7f7f"></uni-icons>
								<uni-icons type="heart-filled" color="red" v-else></uni-icons>
							</view>
							<view class="note-like-num">
								{{item.likeCount}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="notes-content" v-show="current === 1">
				<view class="note-item" v-for="item in goodsData" :key="item.goodsAid" @click="clickGoodsItem(item)">
					<view class="note-image">
						<image :src="item.goodImg" mode="aspectFill"></image>
					</view>
					<view class="note-title">
						{{item.goodsName}}
					</view>
					<view class="goods-price">
						{{item.goodsPrice}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js'
	export default {
		props: {
			// 定义接收父组件传递的infos数组，这里要求数组元素是包含url属性的对象
			notes: {
				type: Array,
				default: () => []
			},
			goods: {
				type: Array,
				default: () => []
			},
		},
		mounted() {
			this.noteData = this.notes;
			this.goodsData = this.goods;

			// 添加searchNoteOrCollectResult事件监听，只在这里添加一次，避免重复添加
			mitter.on('searchNoteOrCollectResult', (data) => {
				this.noteData = data.notes;
				this.goodsData = data.goods;
				this.changeItems();
			})
		},
		beforeDestroy() {
			mitter.off('searchNoteOrCollectResult');
		},
		onHide() {
			mitter.off('searchNoteOrCollectResult');
		},
		watch: {
			noteTotalCount(newCount, oldCount) {
				this.noteTotalCount = newCount;
			},
			goodsTotalCount(newCount, oldCount) {
				this.goodsTotalCount = newCount;
			}
		},

		data() {
			return {
				noteData: [],
				goodsData: [],
				noteTotalCount: 0, // 收藏的笔记数量
				goodsTotalCount: 0,
				items: ['笔记', '商品'],
				current: 0,
			};
		},

		methods: {

			changeItems() {
				this.noteTotalCount = this.noteData.length;
				this.goodsTotalCount = this.goodsData.length;
				this.items[0] = "笔记 " + this.noteTotalCount;
				this.items[1] = "商品 " + this.goodsTotalCount;
			},


			clickNoteItem(item) {
				uni.navigateTo({
					url: `/pages/tabBar/component/topBar/travel/noteDetailPage?aid=${item.noteAid}`
				})
			},

			clickGoodsItem(item) {
				uni.navigateTo({
					url: `/pages/tabBar/extUI/shopping_topBar/goodDetail?goodAid=${item.goodsAid}`
				})
			},

			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.$emit('currentClick', this.current);
			},

		},
	};
</script>

<style lang="scss" scoped>
	.collect-main {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;

		.content {

			.notes-content {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.note-item {
					width: 300rpx;
					margin-top: 40rpx;
					box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
					margin-top: 20rpx;
					margin-bottom: 30rpx;
					margin-right: 8rpx;
					margin-left: 22rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.note-image {
						width: 100%;
						z-index: 1;

						image {
							width: 300rpx;
							height: 300rpx;
						}

						video {
							width: 300rpx;
							height: 300rpx;
						}
						
						.DomVideoPlayer{
							width: 300rpx;
							height: 300rpx;
						}

					}
				}

				.note-title {
					margin-top: 20rpx;
					padding: 20rpx;
					font-size: 28rpx;
				}

				.goods-price {
					padding: 20rpx;
					font-size: 30rpx;
				}

				.note-author-info {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 20rpx;

					.note-author-avatar-name {
						display: flex;
						justify-content: center;
						align-items: center;

						.note-author-avatar {
							image {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
							}
						}

						.note-author-name {
							margin-left: 10rpx;
							font-size: 20rpx;
							color: #6f6f6f;
						}
					}

					.like-num-view {
						display: flex;
						justify-content: center;
						align-items: center;

						.note-like-num {
							margin-left: 7rpx;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
</style>